// 组件通信的小案列

import React, { Component } from "react";
import TableControl from "./TableControl";

export default class App extends Component {
  constructor() {
    super();
    this.titles = ["精选", "流行", "完美"];
    this.state = {
      // 这样的数据就可以写在外面了。。
      currentTitle: "精选",
    };
  }
  render() {
    const { currentTitle } = this.state;
    return (
      <div>
        <TableControl
          itemClick={(index) => this.itemClick(index)}
          titles={this.titles}
        ></TableControl>
        <h2>{currentTitle}</h2>
      </div>
    );
  }
  itemClick = (index) => {
    this.setState({
      currentTitle: this.titles[index],
    });
  };
}
